import React from 'react'
import { useState } from 'react'
import { GoodsList } from './components/GoodsList/GoodsList'
import { GoodsContext } from './store/GoodsContext'

export const App = () => {
    const GOOODS_List = [
        {
            id: 1,
            goodsName: '学前快读600字(礼盒装)',
            goodsImg: "https://9i.dvmama.com/supplier/2022/05/30/640_640_f20bf41800f2a5cd4a924e1f5032783e.jpg",
            goodsPrice: 59.9,
            goodsDesc: '学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)'
        },
        {
            id: 2,
            goodsName: '学前快读600字(礼盒装)',
            goodsImg: "https://9i.dvmama.com/supplier/2021/08/18/800_800_43ebc14896e137a36217c76463755b43.jpg",
            goodsPrice: "29.9",
            goodsDesc: '学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)'
        },
        {
            id: 3,
            goodsName: '学前快读600字(礼盒装)',
            goodsImg: "https://9i.dvmama.com/supplier/2022/04/26/800_800_5408ea030f307b322c44dbe55f5511ee.jpg",
            goodsPrice: "49.9",
            goodsDesc: '学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)'
        },
        {
            id: 4,
            goodsName: '学前快读600字(礼盒装)',
            goodsImg: "https://9i.dvmama.com/supplier/2022/06/01/800_800_6a43a1bc0268d078bb9d125559e08b5a.png",
            goodsPrice: 109.9,
            goodsDesc: '学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)'
        },
        {
            id: 5,
            goodsName: '学前快读600字(礼盒装)',
            goodsImg: "https://9i.dvmama.com/supplier/2020/09/29/800_800_eaf85b7a719b0bf42acaac3d4cea70de.jpg",
            goodsPrice: 89.9,
            goodsDesc: '学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)'
        },
        {
            id: 6,
            goodsName: '学前快读600字(礼盒装)',
            goodsImg: "https://9i.dvmama.com/supplier/2022/05/30/640_640_f20bf41800f2a5cd4a924e1f5032783e.jpg",
            goodsPrice: 99.9,
            goodsDesc: '学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)'
        },
        {
            id: 7,
            goodsName: '学前快读600字(礼盒装)',
            goodsImg: "https://9i.dvmama.com/supplier/2018/10/30/800_800_4eae5d1a9549cc557a9c3162d5a80a43.jpg",
            goodsPrice: 12.9,
            goodsDesc: '学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)'
        },
        {
            id: 8,
            goodsName: '学前快读600字(礼盒装)',
            goodsImg: "https://9i.dvmama.com/supplier/2022/05/30/640_640_f20bf41800f2a5cd4a924e1f5032783e.jpg",
            goodsPrice: 19.9,
            goodsDesc: '学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)学前快读600字(礼盒装)'
        },
        {
            id: 9,
            goodsName: '《传世彩绘四大名著》典藏版套装4册 赠送：《四大名著图画品鉴》+《锦罗（十二金钗）》手账+《四大名著箴言》（中外名家插图日课版）',
            goodsImg: "https://9i.dvmama.com/supplier/2021/08/18/800_800_43ebc14896e137a36217c76463755b43.jpg",
            goodsPrice: 9.9,
            goodsDesc: '《传世彩绘全本四大名著》典藏版 目前市面上仅有的一套 工笔画全本 四大名著 历经数十年 复现7 位古今工笔画大家 1000 余幅工笔画作 摘录脂砚斋、毛宗岗、金圣叹、李贽、鲁迅、胡适、林语堂、梁实秋、张爱玲等 100+ 位名师大家的点评文字'
        }
    ]

    const [data, setData] = useState({
        goodsList: GOOODS_List
    });

    const [shopCountData, setShopDataCount] = useState({
        shops: [],
        shopAmount: 0,
        priceAmount: 0
    });

    const addCounter = (item) => {
        const newData = {...data}
        newData.goodsList.map ( goods => {
            if (goods.id == item.id) {
                if (goods.count) {
                    goods.count += 1
                } else {
                    goods.count = 1
                }
            }   
        })

        const newShopCountData = {...shopCountData}
        newShopCountData.shopAmount += 1
        newShopCountData.priceAmount += item.goodsPrice

        setData(newData)
        setShopDataCount(newShopCountData)
    }
    const reduceCounter = (item) => {
        const newData = {...data}
        newData.goodsList.map ( goods => {
            if (goods.id == item.id) {
                if (goods.count > 0) {
                    goods.count -= 1
                }
            }   
        })

        const newShopCountData = {...shopCountData}
        newShopCountData.shopAmount -= 1
        newShopCountData.priceAmount -= item.goodsPrice

        setData(newData)
        setShopDataCount(newShopCountData)
    }

  return (
      <GoodsContext.Provider value={{data, addCounter, reduceCounter}}>
          <GoodsList goodsList={data.goodsList}></GoodsList>
      </GoodsContext.Provider>
  )
}
